import ProSkeleton, {
  ListSkeletonItem,
  PageHeaderSkeleton,
  TableSkeleton
} from "@ant-design/pro-skeleton";
import React, { useEffect, useMemo, useState } from "react";

interface SkeletonProps {
  wait?: number;
  show?: boolean;
  type: "list" | "result" | "descriptions" | "header" | "table" | "header&table";
  [propName: string]: any;
}

const Skeleton: React.FC<SkeletonProps> = ({ wait = 400, type, children, ...props }) => {
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    setTimeout(() => {
      setLoading(false);
    }, wait);
  }, []);

  const skeleton = useMemo(() => {
    let skeleton: any;
    switch (type) {
      case "table":
        skeleton = <TableSkeleton active {...props} />;
        break;
      case "header":
        skeleton = <PageHeaderSkeleton active {...props} />;
        break;
      case "header&table":
        skeleton = (
          <>
            <ListSkeletonItem active {...props} />
            <div style={{ height: 24 }} />
            <TableSkeleton active {...props} />
          </>
        );
        break;
      default:
        skeleton = <ProSkeleton active type={type} {...props} />;
        break;
    }
    return skeleton;
  }, [loading]);

  return (
    <>
      <div style={{ display: loading ? "none" : undefined }}>{children}</div>
      {loading && skeleton}
    </>
  );
};

export default Skeleton;
